<template>
  <div>
    <el-form
      label-width="100px"
      :model="dataForm"
      ref="dataForm"
      :rules="dataRule"
      @keyup.enter.native="dataFormSubmitHandle()"
    >
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <el-form-item prop="stationCode" label="站码">
            <el-input
              v-model="dataForm.stationCode"
              clearable
              placeholder="站码"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="upPsdId" label="上行PSD ID">
        <el-input v-model="dataForm.upPsdId" clearable placeholder="上行PSD ID">
          <template #prepend>0X</template>
        </el-input>
      </el-form-item>
      <el-form-item prop="downPsdId" label="下行PSD ID">
        <el-input
          v-model="dataForm.downPsdId"
          clearable
          placeholder="下行PSD ID"
        >
          <template #prepend>0X</template>
        </el-input>
      </el-form-item>
      <el-form-item prop="localIp" label="本地IP">
        <el-input v-model="dataForm.localIp" clearable placeholder="本地IP">
        </el-input>
      </el-form-item>
      <el-form-item prop="localPort" label="本地端口">
        <el-input v-model="dataForm.localPort" clearable placeholder="本地端口">
        </el-input>
      </el-form-item>
      <el-form-item prop="localGateway" label="本地网关">
        <el-input
          v-model="dataForm.localGateway"
          clearable
          placeholder="本地网关"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="localMask" label="本地子网掩码">
        <el-input
          v-model="dataForm.localMask"
          clearable
          placeholder="本地子网掩码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="remoteIp" label="远端IP">
        <el-input v-model="dataForm.remoteIp" clearable placeholder="远端IP">
        </el-input>
      </el-form-item>
      <el-form-item prop="remotePort" label="远端端口">
        <el-input
          v-model="dataForm.remotePort"
          clearable
          placeholder="远端端口"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end">
      <el-button type="primary" @click="read()">读取</el-button>
      <el-button type="primary" @click="confirm()">下发</el-button>
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
export default {
  props: {
    dataForm: {
      type: Object,
    },
    pedca: {
      type: String,
    },
    pedcb: {
      type: String,
    },
  },
  data() {
    return {};
  },
  computed: {
    dataRule() {
      return {
        cpu: [
          {
            required: true,
            message: "cpu不能为空",
            trigger: "blur",
          },
        ],
        stationCode: [
          {
            required: true,
            message: "站码配置不能为空",
            trigger: "blur",
          },
        ],
        upPsdId: [
          {
            required: true,
            message: "上行PSD ID配置不能为空",
            trigger: "blur",
          },
          {
            pattern: /^[A-F0-9]{8}$/i,
            message: "数字不为8位16进制数",
            trigger: "blur",
          },
        ],
        downPsdId: [
          {
            required: true,
            message: "下行PSD ID配置不能为空",
            trigger: "blur",
          },
          {
            pattern: /^[A-F0-9]{8}$/i,
            message: "数字不为8位16进制数",
            trigger: "blur",
          },
        ],
        IP: [
          {
            required: true,
            message: "本地IP不能为空",
            trigger: "blur",
          },
        ],
        port: [
          {
            required: true,
            message: "本地端口不能为空",
            trigger: "blur",
          },
        ],
        gateway: [
          {
            required: true,
            message: "本地网关不能为空",
            trigger: "blur",
          },
        ],
        subnetMask: [
          {
            required: true,
            message: "本地子网掩码不能为空",
            trigger: "blur",
          },
        ],
        remoteIp: [
          {
            required: true,
            message: "远端IP不能为空",
            trigger: "blur",
          },
        ],
        remotePort: [
          {
            required: true,
            message: "远端端口不能为空",
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    read: debounce(function() {
      let cpu = 0;
      if (this.pedca == "ETH-SIG" || this.pedcb == "ETH-SIG") {
        cpu = 0;
      } else if (this.pedca == "ETH-TIAS" || this.pedcb == "ETH-TIAS") {
        cpu = 1;
      } else {
        cpu = 0;
      }

      this.$http("/psc/cmd/readConf", {
        method: "GET",
        params: {
          pedc: this.pedca ? 0 : 1,
          cpu: cpu,
        },
      }).then((res) => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg);
        }
        this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            // onClose: () => {
            // 	setTimeout(() => {
            // 		this.init()
            // 	}, 4000);
            // }
          });

        this.dataForm = res.data.data;
      });
    }, 100),
    confirm: debounce(function() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
      let cpu = 0;
      if (this.pedca == "ETH-SIG" || this.pedcb == "ETH-SIG") {
        cpu = 0;
      } else if (this.pedca == "ETH-TIAS" || this.pedcb == "ETH-TIAS") {
        cpu = 1;
      } else {
        cpu = 0;
      }
        this.dataForm.cpu=cpu;
        this.dataForm.pedc=this.pedca ? 0 : 1;

        this.$http.post("/psc/cmd/writeConfig", this.dataForm).then((res) => {
          if (res.data.code !== 0) {
            return this.$message.error(res.data.msg);
          }

          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            // onClose: () => {
            // 	setTimeout(() => {
            // 		this.init()
            // 	}, 4000);
            // }
          });
        });
      });
    },100),
  },
};
</script>

<style></style>
